<template>
  <div id="shop-page" v-if="detail.id>0">
    <div class="custom-table custom-table-3" style="background: #f8f8f8; padding-top: 10px; padding-bottom: 10px">
      <div class="row">
        <div class="left">名称:</div>
        <div class="right" v-text="detail.name"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">所在位置:</div>
        <div class="right">
          <span v-text="detail.addressDetail"></span>
        </div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
      <div style="height: 55px;">
        <div class="row">
          <div class="left">logo:</div>
          <div class="right">
            <el-image :src="detail.logo" style="width: 50px; height: 50px;"/>
          </div>
          <div class="c"></div>
        </div>
        <div class="row">
          <div class="left">banner:</div>
          <div class="right">
            <div v-if="detail.bannerArr && detail.bannerArr.length>0">
              <el-image style="width: 50px; height: 50px; margin-left: 3px;" v-for="(image,index) in detail.bannerArr" :key="index"
                        :src="image" :preview-src-list="detail.bannerArr"></el-image>
            </div>
            <span v-if="detail.bannerArr && detail.bannerArr.length===0">-</span>
          </div>
          <div class="c"></div>
        </div>
      </div>
      <div class="c"></div>
      <div>
        <div class="row">
          <div class="left">账户余额:</div>
          <div class="right">
            <span class="price-font" v-text="'￥'+ToMoney(detail.money)"></span>
            <my-button type="primary" icon="el-icon-view" :click="function (){$router.push('ShopMoneyLogPage')}" text="余额日志" access-action="Shop/getMoneyLogList"></my-button>
            <my-button type="success" icon="el-icon-plus" :click="function (){recharge()}" text="余额充值" access-action="Shop/recharge"></my-button>
          </div>
          <div class="c"></div>
        </div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">商户号:</div>
        <div class="right">
          <span class="b red" v-text="detail.number"></span>
        </div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">经营分类范围:</div>
        <div class="right">
          <el-tag size="medium" type="success" effect="dark" v-for="(item,index) in detail.classifyArr" :key="index" style="margin-left: 5px; margin-top: 1px; line-height: 25px;">{{item.name+'-'+item.count}}</el-tag>
          <el-button size="mini" type="primary" @click="manageClassify">管理</el-button>
        </div>
        <div class="c"></div>
      </div>

      <div style="text-align: center; margin-top: 20px; float: left; width: 100%;">
        <my-button type="danger" access-action="Shop/updateInfo" :click="function (){openMainUpdateDialog()}" text="修改信息"></my-button>
        <my-button type="success" access-action="Shop/bindingQrCode" :click="function (){openBindingQrDialog()}" text="查看绑定二维码"></my-button>
      </div>
      <div class="c"></div>
    </div>

    <div class="custom-table custom-table-3"  style=" margin-top:30px;background: #f8f8f8; padding-top: 10px; padding-bottom: 10px">
      <div class="row">
        <div class="left">联系电话:</div>
        <div class="right" v-text="detail.mobile"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">是否同城配送:</div>
        <div class="right" v-text="detail.isSameCitySend===1?'是':'否'"></div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">营业时间:</div>
        <div class="right" v-text="detail.businessTime.join(',')"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">营业状态:</div>
        <div class="right">
          <span v-text="detail.businessStatus.name"></span>
          <span v-if="detail.businessStatus.id===2" v-text="detail.businessStopInfo"></span>
        </div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">配送费:</div>
        <div class="right" v-text="detail.expressPrice"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">满免配送费:</div>
        <div class="right" v-text="detail.freeExpressPrice"></div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">满减:</div>
        <div class="right">
          <el-tag type="success" v-for="(item,index) in detail.fullMinusPrice" :key="index"
                  v-text="'满'+item.full+'减'+item.minus"></el-tag>
        </div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">店员数量:</div>
        <div class="right">
          <span class="price-font" v-text="detail.clerkNums"></span>
        </div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">商品数量:</div>
        <div class="right">
          <span class="price-font" v-text="detail.productNums"></span>
        </div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">收藏数量:</div>
        <div class="right">
          <span class="price-font" v-text="detail.collectNums"></span>
        </div>
        <div class="c"></div>
      </div>


      <div class="row">
        <div class="left">店铺-服务评分:</div>
        <div class="right">
          <span class="price-font" v-text="detail.score"></span>
        </div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">店铺-物流评分:</div>
        <div class="right">
          <span class="price-font" v-text="detail.expressScore"></span>
        </div>
        <div class="c"></div>
      </div>

      <div style="text-align: center; margin-top: 20px; float: left; width: 100%;">
        <my-button type="success" :click="function (){openUpdateDialog()}" text="修改信息" access-action="Shop/edit"></my-button>
      </div>
      <div class="c"></div>
    </div>

    <change-shop-info-dialog :success-function="getDetail" ref="changeShopInfoDialog"/>
    <recharge-dialog ref="recharge-dialog"/>
    <binding-qr-dialog ref="binding-qr-dialog"/>
    <classify-change-dialog ref="classify-change-dialog"/>
  </div>
</template>

<script>

import ChangeShopInfoDialog from '../Dialog/ChangeShopInfoDialog'
import RechargeDialog from '../Dialog/RechargeDialog'
import MyButton from '../Common/MyButton'
import BindingQrDialog from '../Dialog/BindingQrDialog'
import ShopClassify from '../Common/ShopClassify'
import ClassifyChangeDialog from '../Dialog/ClassifyChangeDialog'
var fieldArr = DemoData.Shop.field
export default {
  name: 'ShopPage',
  components: {ClassifyChangeDialog, ShopClassify, BindingQrDialog, MyButton, RechargeDialog, ChangeShopInfoDialog},
  mounted () {
    this.getDetail()
  },
  data: function () {
    return {
      loading: false,
      detail: {
        'id': 0,
        'number': '1190000007',
        'name': '唐久便利',
        'logo': 'http://image.yangfankj.com/shop/logo/7.jpg',
        'classifyName': [
          '生活超市'
        ],
        'bannerArr': [],
        'province': '陕西省',
        'city': '西安市',
        'cityCode': '029',
        'county': '长安区',
        'address': '子午大道西安华苑小区西北侧',
        'addressDetail': '陕西省,西安市,长安区 子午大道西安华苑小区西北侧',
        'location': [
          '108.910946',
          '34.171724'
        ],
        'mobile': '18933633331',
        'createdTime': '22-07-25 10:51',
        'status': {
          'name': '正常',
          'id': 1
        },
        'isSameCitySend': 1,
        'productNums': 4,
        'collectNums': 2,
        'score': 80,
        'expressScore': 80,
        'businessStatus': {
          'name': '临时停业',
          'id': 2
        },
        'businessTime': [
          '07:30',
          '20:00'
        ],
        'expressPrice': 200,
        'freeExpressPrice': 50,
        'fullMinusPrice': [
          {
            'minus': 10,
            'full': 99
          },
          {
            'minus': 25,
            'full': 200
          },
          {
            'minus': 50,
            'full': 300
          },
          {
            'minus': 70,
            'full': 500
          }
        ],
        'businessStopInfo': '国庆临时休息7天(10.01~10.07)',
        'clerkNums': 7,
        'updateStatus': 0
      }
    }
  },
  methods: {
    manageClassify:function () {
      this.$refs['classify-change-dialog'].open(this.detail.classifyArr)
    },
    recharge:function () {
      this.$refs['recharge-dialog'].open()
    },
    // 获取详情
    getDetail: function () {
      let $this = this
      $this.detail.id=0
      $this.$forceUpdate()
      setTimeout(function () {
        $this.loading=true
        $this.MyRequest($this.ApiDoNameShop + 'Shop/info', {}, function (data) {
          $this.detail = data
          $this.$forceUpdate()
          $this.loading=false
        },function (response) {
          $this.$message.error(response.message)
          $this.loading=false
        })
      },500)
    },
    // 提交-【主信息-更新-弹窗】
    openMainUpdateDialog () {
      this.$router.push('/ShopUpdateMainPage')
    },
    // 提交-【基本信息-更新-弹窗】
    openUpdateDialog () {
      this.$refs.changeShopInfoDialog.open(this.detail)
    },
    // 提交-【基本信息-更新-弹窗】
    openBindingQrDialog () {
      this.$refs['binding-qr-dialog'].open()
    },
  }
}
</script>

<style scoped>

</style>
